import React, { useState, useEffect } from 'react'
import { Card, Table, Avatar, Button, Space, Popconfirm } from 'antd';
import api from '../api'
export default function Users() {
    const [list, setList] = useState([])
    const columns = [
        {
            title: '用户名',
            dataIndex: 'username'
        },
        {
            title: '邮箱',
            dataIndex: 'email'
        },
        {
            title: '手机',
            dataIndex: 'phone'
        },
        {
            title: '角色',
            dataIndex: 'auth',
            render: (item) => {
                return item == 1 ? '超级管理员' : item == 2 ? '普通管理员' : '暂无'
            }
        },
        {
            title: '头像',
            dataIndex: 'image',
            render: (item) => {
                return <Avatar shape="square" size={64} src={item} />
            }
        },
        {
            title: '操作',
            key: 'action',
            render: (arg1) => {
                return (
                    <Space>
                        <Button type='primary'>查看</Button>
                        <Popconfirm
                            placement="top"
                            title="提示"
                            description="您确定要删除吗?"
                            onConfirm={()=>{deleteUser(arg1._id)}}
                            okText="确认"
                            cancelText="取消">
                            <Button type='primary' danger>删除</Button>
                        </Popconfirm>
                    </Space>
                )
            }
        }

    ]
    useEffect(() => {
        getUsers()
    }, [])
    const getUsers = async () => {
        const result = await api.users.getUsers()
        setList(result.data.result)
    }

    const deleteUser = (_id) => {
        console.log('_id', _id);
    }
    return (
        <div style={{ display: 'flex', justifyContent: 'center' }}>
            <Card bordered={true} style={{ width: '98%', marginTop: '10px' }}>
                <Table dataSource={list} columns={columns} rowKey="_id"></Table>
            </Card>
        </div>
    )
}
